<template>
    <ul>
        <li v-for="item in data.data1" class="libox">
            <img width="50"
                src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/5f84bd314daa4e97916249b891b16927~tplv-tt-origin:0:0.png?_iz=30575&from=sign_default&x-expires=1681401600&x-signature=e4jJqjlbjhWp6PRyuH4LURZDHW0%3D"
                alt="">
            <br>
            <h4>{{ item.Title }}</h4>
        </li>
    </ul>
</template>

<script setup>
import { reactive, onMounted } from "vue"
const data = reactive({
    data1: []
})
onMounted(() => {
    shuju()
})
const shuju = () => {
    fetch(`https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc&_signature=_02B4Z6wo00d0190uDQAAAIDAjVlJ-1jVObvdCgmAAJNjn4HEIWjvKFpE05pbDJLwRtsR3zAUKl2C6AdWqQK6mKZqSfDbHA2CKlYdeJpvlQmeDjVnQ1yd.ojNY2n7HomyRis5TxYHxGrunMZ.ae`)
        .then(res => res.json())
        .then(res => {
            console.log(res)
            data.data1 = res.data
            console.log(data.data1)
        })
}
</script>

<style lang="scss" scoped>
.libox {
    display: flex;
    // padding-left: 10px;
    padding-right: 10px;
    justify-content: space-between;
    list-style-type: none;
    border: 1px solid #fff;
}
</style>